<template>
  <div class="container">
    <el-card class="questionCard">
      <!-- 头部搜索 -->
      <el-row
        type="flex"
        justify="space-between"
        align="center"
        class="questionHeader"
      >
        <el-col :span="12">
          <el-form :inline="true" style="margin-left: 20px">
            <el-form-item label="关键字">
              <el-input
                class="questionInput"
                v-model.trim="value"
                type="text"
                autocomplete="off"
                placeholder="根据编号搜索"
                size="small"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end">
            <el-form :inline="true">
              <el-form-item>
                <el-button @click="onDel" size="small">清除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-row>
        </el-col>
      </el-row>
      <!-- 头部搜索 -->
      <!-- 消息提示 -->
      <el-alert type="info" show-icon :closable="false">
        <template slot="title">
          {{ "数据一共" + page.total + "条" }}
        </template>
      </el-alert>
      <!-- 消息提示结束 -->

      <!-- 渲染列表 -->
      <template>
        <el-table :data="randomsData" style="width: 100%; margin-top: 20px">
          <el-table-column prop="id" label="编号" width="220">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="100">
            <template slot-scope="{ row }">
              {{ row.questionType | filterQuestionType }}
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template slot-scope="{ row }">
              <div
                class="point"
                v-for="item in row.questionIDs"
                :key="item.number"
                @click="showQuestionDialog(item)"
              >
                {{ item.number }}
              </div>
              <br />
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="220">
            <template slot-scope="{ row }">
              {{ row.addTime | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(m)" width="200">
            <template slot-scope="{ row }">
              {{ row.totalSeconds | filterTimeSeconds }}
            </template>
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="200">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="200">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <el-button
                class="DelBtn"
                @click="handleDel(row)"
                type="danger"
                circle
                size="small"
                plain
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!---------------- 分页组件 -->
      <el-row type="flex" justify="center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout=" prev, pager, next, sizes, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-row>
      <!------------------ 弹出层组件 -->
      <QuestionDialog
        :dialogVisible.sync="dialogVisible"
        @cancle="cancle"
        :detailQuestion="detailQuestion"
        :detailOptions="detailOptions"
        :checkBox="checkBox"
      ></QuestionDialog>
    </el-card>
  </div>
</template>

<script>
// 导入请求接口
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
// 引入 对应通用常量
import QuestionDialog from '@/module-hmmm/components/question-randoms-dialog'
// import { questionType, difficulty, optionType } from '@/api/hmmm/constants'
// 引入 时间过滤器
// import { parseTimeByString } from '@/filters/index'
export default {
  components: {
    QuestionDialog
  },
  data () {
    return {
      // 搜素框内容
      value: '',
      // 当前页面数据
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
        pageSizes: [],
        suerPageSize: 20
      },
      // 随机问题列表
      randomsData: [],
      // 单个问题详情数据
      detailQuestion: {},
      // 弹窗问题 选项详情
      detailOptions: [],
      // 多选框勾选数据
      checkBox: [],
      // 弹层控制
      filterList: [],
      dialogVisible: false,
      // 搜索状态
      isSearch: false
    }
  },
  created () {
    // 初次获取到 数据列表
    this.randomsList()
    // console.log(this.page.total / this.page.pageSize)
    // console.log(questionType)
  },
  // 过滤器
  // filters: {
  //   // 鉴定 题目类型方法
  //   filterQuestionType (val) {
  //     const f = questionType.find((e) => e.value === val * 1)
  //     return f ? f.label + '题' : '未知'
  //   },
  //   // 鉴定 题目类型方法
  //   filterQuestionDiff (diffType) {
  //     const f = difficulty.find((e) => e.value === diffType * 1)
  //     return f ? f.label : '未知'
  //   },
  //   // 选项个数
  //   filterOptionsNum (val) {
  //     const f = optionType.find((e) => e.value === val * 1)
  //     return f ? f.label : '未知'
  //   },
  //   // 格式化时间
  //   filterTimeSeconds (val) {
  //     const h = parseInt(val / 3600)
  //     const minute = parseInt((val / 60) % 60)
  //     const second = Math.ceil(val % 60)
  //     const hours = h < 10 ? '0' + h : h
  //     const formatSecond = second > 59 ? 59 : second
  //     return `${hours > 0 ? `${hours}:` : ''}${
  //       minute < 10 ? '0' + minute : minute
  //     }:${formatSecond <script 10 ? '0' + formatSecond : formatSecond}`
  //   },
  //   filterParseTime: parseTimeByString
  // },
  methods: {
    // 关于分页中 每页数据量的 设置方法
    everyPageNumber (total, pagesize) {
      // 每页显示数据条数
      const pageSizes = []
      // ---------- 获取到一个 每页显示数据的列表 利用 Array.from 与new Array
      Array.from(new Array(parseInt(total / pagesize)), (t, i) =>
        pageSizes.push(pagesize * (i + 1))
      )
      return pageSizes
    },
    // 请求数据
    async randomsList () {
      const { data } = await randoms({
        page: this.page.currentPage,
        pagesize: this.page.pageSize
      })
      // 赋值总页数
      this.page.total = data.counts
      // 赋值列表数据
      this.randomsData = data.items
      // sessionStorage.setItem('randomsList', JSON.stringify(data.items))
      // 每页显示数据条数
      this.page.pageSizes = this.everyPageNumber(
        this.page.total,
        this.page.suerPageSize
      )
    },
    // 提交搜素 点击的时候搜素关键词 ;;;;;;搜索为空
    async onSearch () {
      // 需要再次改变当前页面为1 的时候请求
      this.page.currentPage = 1
      // 如果没有内容，就不进行搜素
      if (this.value.length > 0) {
        // 搜索标志位
        this.isSearch = true
        console.log(this.value)
        // 进行搜素请求
        try {
          const { data } = await randoms({
            page: this.page.currentPage,
            pagesize: this.page.total,
            keyword: this.value
          })
          // console.log('我是搜索关键字', data)
          // 赋值总页数
          this.page.total = data.counts
          this.filterList = data.items
          // 获取到本地数据到 this.randomsData
          // this.randomsData = JSON.parse(sessionStorage.getItem('randomsList'))
          // console.log('这是本地', this.randomsData)
          // 给数据列表赋值
          this.randomsData = this.filterList.slice(
            (this.page.currentPage - 1) * this.page.pageSize,
            this.page.currentPage * this.page.pageSize
          )
          console.log(this.filterList)
          return this.$message.success('数据检索成功')
        } catch (error) {
          // 请求失败
          // console.log(this.value)
          return this.$message.warning('数据检索失败' + error)
        }
      } else {
        return this.$message.warning('请输入内容再进行搜素哦')
      }
    },
    // 清除搜索数据
    onDel () {
      // 清除搜索标志位
      this.isSearch = false
      // 清空 输入框数据
      this.value = ''
      // 清空数据后 进行 重新检索所有数据
      this.randomsList()
    },
    // 点击删除数据
    handleDel (row) {
      // console.log(row.id)
      this.$confirm('该操作将会永久删除数据，您确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async (action) => {
          console.log(action)
          if (action === 'confirm') {
            try {
              // 请求删除数据
              await removeRandoms(row)
              // 删除视图数据 获取到 对应列表数据id
              const res = this.randomsData.findIndex((t) => t.id === row.id)
              // console.log(res)
              // 删除 列表数据
              this.randomsData.splice(res, 1)
              // 刷新数据列表
              this.randomsList()

              return this.$message.success('删除成功')
            } catch (error) {
              return this.$message.warning('删除失败' + error)
            }
          } else {
            return false
          }
        }
      })
    },
    // 改变页面展示数据条数
    handleSizeChange (o) {
      this.page.pageSize = o
      this.randomsList()
    },
    // 点击当前页面 切换页面
    handleCurrentChange (page) {
      // console.log('页码变了', o)
      this.page.currentPage = page
      // 如果处于搜索状态 那么就不能发出请求 使用搜索后的数据进行分页
      if (this.isSearch) {
        // console.log('wo')
        // 表示获取过来的搜索结果
        // 从搜索结果中获取分页内容
        // 如果获取成功 那么 this.randomsData中保存的是搜索结果
        // 1 当前页码 * 当前每页显示数据条数 = 当前也列表数据开始的索引号
        this.randomsData = this.filterList.slice(
          (this.page.currentPage - 1) * this.page.pageSize,
          this.page.currentPage * this.page.pageSize
        )
      } else {
        this.randomsList()
        // 2 利用截取掉前面的数据
      }
    },
    // showdislog 显示题目详情弹窗
    async showQuestionDialog (item) {
      // console.log('woshi1', item)
      // 弹窗显示
      this.dialogVisible = true
      // 获取到详情数据
      const { data } = await detail(item)
      // 储存题目详情
      this.detailQuestion = data
      console.log('我是问题详情', this.detailQuestion)
      // 储存选项数据
      this.detailOptions = data.options
      // 选项数据状态
      // console.log(this.detailOptions)
      // 遍历数据 将 isRight的值转化为 bool值
      // 筛选出 符合状态的值
      this.checkBox = []
      const isRight = this.detailOptions.filter((t) => {
        return t.isRight === 1 ? t.id : false
      })
      /* 筛选数据 到checkBox中 作为 复选框选择的 依据 */
      isRight.forEach((item) => {
        // console.log(item)
        this.checkBox.push(item.id)
        // 数组去重
        this.checkBox.filter((t, i) => this.checkBox.indexOf('t') === i)
      })
      // this.checkBox
      // console.log(r)
      // console.log(this.checkBox)
    },
    // 关闭弹窗，以及清除数据
    cancle (isDialog) {
      this.dialogVisible = isDialog
      // 清空数据 防止回流
      this.detailQuestion = []
      this.detailOptions = []
      // 关闭视频控件
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
  .el-row .title {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .questionCard {
    // 头部搜索
    .questionHeader {
      height: 50px;
      width: 100%;
      .questionInput {
        width: 300px;
      }
    }
    .point {
      cursor: pointer;
      color: #0caafa;
    }
  }
}
</style>
